<template>
  <div>
    <van-nav-bar
      title="驾校"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      class="NavBar"
    />
    <div id="container" class="gaoDeMap"></div>
    <!-- 帮我找驾校 -->
    <div class="find">
      <div class="helpfindSchool">
        <div>
          <p>为你推荐距离最近的10个驾校</p>
          <span> 不清楚哪家驾校合适?试试帮我找驾校 </span>
        </div>
        <button>帮我找驾校</button>
      </div>
    </div>
  </div>
</template>

<script>
import httpApi from "@/http";
import AMapLoader from "@amap/amap-jsapi-loader"; // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
import { shallowRef } from "@vue/reactivity";
import { ref, reactive} from "vue";
export default {
  setup() {
    const onClickLeft = () =>{
      history.back()
    } 
    let Amap = reactive({}); //用于存储AMap方法,使AMap在其他作用域也可以使用
    const map = shallowRef(null);
    const userLngLat = ref(null); //用户定位 经纬度
    let user_lng = ref(null);
    let user_lat = ref(null);
    let userCity = ref(null); //存储用户所在城市名
    const cityName = ref(null);
    const cityCode = ref(null);

    AMapLoader.reset(); //重置 删除之前使用加载api方式

    function initMap() {
      AMapLoader.load({
        key: "f7b50324c82e371d4b319189fc3f48b4", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.CitySearch", "AMap.Marker"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          //重点就是这个
          version: "1.1",
          plugins: ["misc/MobiCityPicker"], //SimpleMarker设置自定义图标，PathSimplifier轨迹展示组件
        },
      })
        .then((AMap) => {
          Amap = AMap;
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 13, //初始化地图级别
          });

          getLocation(); //获取用户定位,先进行浏览器定位方法以精确定位,否则采用IP定位方式
          setTimeout(() => {
            getUserMarker(); //移动中心点 用户定位点做点标记
            Address(userCity, userLngLat.value); //坐标转地址信息
            SchoolMarker();
          }, 6000);
        })
        .catch((e) => {
          console.log(e);
        });
    }
    function getLocation() {
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 5000,
        });
        //进行IP城市查询
        geolocation.getCityInfo(function (status, result) {
          if (status == "complete") {
            cityName.value = result.city;
            cityCode.value = result.adcode;
            console.log("进行IP城市查询", cityName.value, cityCode.value);
            userCity.value = result.city;
            /* 定位存储经纬度 */
            userLngLat.value = result.position; //存储用户的经纬度
            console.log("存储用户的经纬度", userLngLat.value);
            user_lng.value = Number(userLngLat.value[0]); //单独存经度
            user_lat.value = Number(userLngLat.value[1]); //纬度
          } else {
            onError(result);
          }
        });
        //获取用户当前的精确位置信息(经纬度)
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            onComplete(result);
          } else {
            onError(result);
          }
        });
      });
      //定位错误，使用另一方式定位
      function onError(data) {
        console.log("如果无法获得精确定位,调用IP定位方法", data);
      }
    }

    //移动地图到用户定位中心点
    function getUserMarker() {
      // ，设置用户定位的地图中心点
      var position = new AMap.LngLat(user_lng.value, user_lat.value); // 标准写法
      map.value.setCenter(position);
      /* 点标记 */
      var marker = new AMap.Marker({
        position: new AMap.LngLat(user_lng.value, user_lat.value), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "我的位置",
      });
      // 将创建的点标记添加到已有的地图实例：
      map.value.add(marker);
    }

    /* 逆向地理编码：将地理坐标（经纬度）转换成地址描述信息 */
    function Address(cityName, LngLat) {
      AMap.plugin("AMap.Geocoder", function () {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: cityName,
        });

        var lnglat = LngLat; //[116.396574, 39.992706]

        geocoder.getAddress(lnglat, function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // result为对应的地理位置详细信息
            console.log("地址信息", result);
          }
        });
      });
    }
    const aroundSchool = reactive([]); //周边驾校
    function SchoolMarker() {
      /* 获取离用户10km内的20个驾校 */
      let params = {
        page: 1,
        pagesize: 20,
        user_lng: user_lng.value,
        user_lat: user_lat.value,
        distance: 10,
      };
      httpApi.schoolApi.schoolDistanceSort(params).then((res) => {
        console.log("周边驾校", res);
        aroundSchool.splice(0, aroundSchool.length, ...res.data.data.result);
        aroundSchool.forEach((item) => {
          const { school_lng, school_lat, school_name } = item;
          /* 遍历 生成驾校点标记 */
          var content = `<div class="marker-round">${school_name}</div>`;
          var marker = new AMap.Marker({
            content: content, // 自定义点标记覆盖物内容
            position: [Number(school_lng),Number(school_lat)], // 基点位置
            offset: new AMap.Pixel(0,0), // 设置点标记偏移量
          });
          map.value.add(marker);
        });
      });
    }

  

    return {
      map,
      getUserMarker,
      reactive,
      ref,
      initMap,
      onClickLeft, //返回导航
    };
  },

  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
};
</script>

<style lang="scss" scoped>
/* 导航栏 */
.NavBar {
  --van-nav-bar-height: 50px;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  width: 100%;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: calc(100vh - 100px);
}
.helpfindSchool {
  background-color: #fff;
  width: 100%;
  height: 100px;
  padding: 0 10px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    width: 60%;

    > p {
      font-size: 16px;
      color: black;
      margin-bottom: 5px;
    }
    > span {
      font-size: 12px;
      color: --font-color-gary;
    }
  }
  > button {
    height: 50px;
    background-image: linear-gradient(90deg, #9ec5fe, #3d8bfd, #0a58ca);
    border-radius: 100px;
    width: 100px;
    font-size: 16px;
    color: #fff;
  }
}
/* 高德地图样式 */
.gaoDeMap {
  ::v-deep .marker-round {
    border-radius: 100px;
    text-align: center;
    color: #fff;
    display: block;
    width: 100px;
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #3d8bfd;
    font-size: 13px;
  }
}
</style>
